<template>
	<van-nav-bar title="商品评价" left-text="" left-arrow @click-left="goBack" />
	<section class="aui-flexView">
		<!-- 订单详细 -->
		<section class="aui-scrollView">
			<!-- 订单状态 -->
			<div class="aui-pay-change">
				<div class="aui-flex">
					<div class="aui-flex-box">
						<h3>{{ info.status_text }}</h3>
					</div>
					<div class="aui-pay-zfb">
						<img src="/assets/images/icon-zfb.png" alt="" />
					</div>
				</div>
			</div>

			<!-- 收货地址 -->
			<div class="aui-flex">
				<div class="aui-flex-add">
					<van-image round fit :src="LoginUser.avatar" />
				</div>
				<div class="aui-flex-box">
					<h3>
						{{ info.consignee }} <em>{{ info.mobile }}</em>
					</h3>
					<p>{{ info.address_text }}</p>
				</div>
			</div>

			<!-- 订单商品 -->
			<div class="aui-commodity-bg" style="background: transparent">
				<div
					style="margin-bottom: 10px; background: #f5f5f5"
					v-for="item in info.proinfo"
				>
					<div class="aui-flex">
						<div class="aui-commodity-img">
							<img :src="item.product.thumbs_text" />
						</div>
						<div class="aui-flex-box">
							<h4 class="van-ellipsis">商品名称：{{ item.product.name }}</h4>
							<p>商品单价：￥{{ item.price }}</p>
							<span class="aui-barter-time">七天退换</span>
						</div>
						<div>
							<h5>￥{{ item.total }}</h5>
							<p class="aui-sml-text">X{{ item.pronum }}</p>
						</div>
					</div>
				</div>
			</div>

			<!-- 评价信息 -->
			<van-form @submit="onSubmit">
				<van-cell-group inset>
					<van-field
						name="rate"
						label=""
						:rules="[{ required: true, message: '请填写评分' }]"
					>
						<template #input>
							<van-rate v-model="rate" icon="fire" void-icon="fire-o" />
						</template>
					</van-field>
					<van-field
						v-model="comment"
						rows="2"
						autosize
						label=""
						type="textarea"
						maxlength="120"
						placeholder="请输入评价内容"
						show-word-limit
					/>
					<van-field name="uploader" label="">
						<template #input>
							<van-uploader v-model="fileList" :max-count="5" multiple />
						</template>
					</van-field>
				</van-cell-group>
				<div style="margin: 16px">
					<van-button round block type="primary" native-type="submit">
						提交
					</van-button>
				</div>
			</van-form>
		</section>
	</section>
</template>
  <script setup>
	const route = useRoute();
	const router = useRouter();
	const { cookies } = useCookies();
	const goBack = () => {
		history.back();
	};
	const orderproid = ref(route.query.orderproid ?? 0);
	const orderid = ref(route.query.orderid ?? 0);
	const info = ref({});
	const LoginUser = reactive(cookies.get("LoginUser"));
	const rate = ref(null);
	const comment = ref(null);
	const fileList = ref([]);
	onBeforeMount(() => {
		getInfoData();
	});
	const getInfoData = async () => {
		let result = await Api.business.orderInfo({
			orderid: orderid.value,
			busid: LoginUser.id,
			orderproid: orderproid.value,
		});
		if (result.code == 1) {
			info.value = result.data;
		}
	};
	const onSubmit = async () => {
		const RequestData = new FormData();
		RequestData.append("busid", LoginUser.id);
		RequestData.append("orderproid", orderproid.value);
		RequestData.append("orderid", orderid.value);
		RequestData.append("rate", rate.value);
		RequestData.append("comment", comment.value);
		// 追加评价图片
		fileList.value.forEach((item) => {
			RequestData.append("proimg[]", item.file);
		});
		let result = await Api.business.orderRate(RequestData);
		if (result.code == 1) {
			showSuccessToast({
				message: result.msg,
				onClose: function () {
					goBack();
				},
			});
		} else {
			showFailToast(result.msg);
		}
	};
</script>
<style scoped>
	@import url("/assets/css/info.css");
</style>